import React, { Component } from 'react'

export default class Page extends Component {
    render() {
        // 定按钮的个数，可能存在比传入按钮的值小的个数
        let btnnum = this.props.pagebtnall > this.props.pagebtnnum ? this.props.pagebtnnum : this.props.pagebtnall
        // 定按钮开始的序列数
        let start = 1
        // 定按钮开始的序列数
        start = (this.props.pagecur - Math.ceil(btnnum / 2)) > 0 ? (this.props.pagecur - Math.ceil(this.props.pagebtnnum / 2) + 1) : 1
        // 定按钮快结束时候的序列数
        if (this.props.pagecur + Math.ceil(btnnum / 2) >= this.props.pagebtnall) {
            // start = this.props.pagebtnall - Math.ceil(btnnum) + 1
            // 需要考虑到按钮个数比传入按钮值小的时候
            start = (this.props.pagebtnall - btnnum) > 0 ? (this.props.pagebtnall - btnnum + 1) : 1
        }

        // 拿到需要渲染的按钮序列数列表
        let arr = [...Array(btnnum).keys()].map(i => i + start)

        return (
            <div className='page' style={{padding : ' 0 10px'}}>
                <button onClick={() => { this.props.onChangePage(this.props.pagecur - 1) }} disabled={this.props.pagecur === 1} style={{padding : '0 5px'}}>上一页</button>
                {arr.map(item => <button onClick={() => { this.props.onChangePage(item) }} style={{ color: this.props.pagecur === item ? 'red' : 'black' ,padding : '0 2px'}} key={item}>{item}</button>)}
                <button onClick={() => { this.props.onChangePage(this.props.pagecur + 1) }} disabled={this.props.pagecur === this.props.pagebtnall} style={{padding : '0 5px'}}>下一页</button>
            </div>
        )
    }
}